<template>
  <div id='profile'>
    <h3>You Details</h3>
    <a-form :form="form" layout='inline' @submit="handleSubmit" class="form">
      <a-form-item v-bind="formItemLayout" class="form-item">
        <span class="label">First Name</span>
        <a-input class="input name"
          v-decorator="[
            'firstname',
            { rules: [{ required: true, message: 'Please input your First Name!' }] },
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" class="form-item">
        <span class="label">Last Name</span>
        <a-input class="input name"
          v-decorator="[
            'lastname',
            { rules: [{ required: true, message: 'Please input your Last Name!' }] },
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" class="form-item">
        <span class="label">Email</span>
        <a-input class="input email"
          v-decorator="[
            'email',
            {
              rules: [
                {
                  type: 'email',
                  message: 'The input is not valid E-mail!',
                },
                {
                  required: true,
                  message: 'Please input your E-mail!',
                },
              ],
            },
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" class="form-item">
        <span class="label">Phone number</span>
        <a-input class="input phone"
          v-decorator="[
            'phone',
            {
              rules: [{ required: true, message: 'Please input your phone number!' }],
            },
          ]"
        >
        </a-input>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" class="form-item">
        <span class="label">Address</span>
        <a-input class="input addr"
          v-decorator="[
            'addr',
            {
              rules: [{ required: true, message: 'Please input your Address!' }],
            },
          ]"
        >
        </a-input>
      </a-form-item>
      <a-form-item v-bind="tailFormItemLayout" class="form-item">
        <a-button type="primary" html-type="submit" class="subm">
          Update Profile
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      confirmDirty: false,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'register' });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue('password')) {
        callback('Two passwords that you enter is inconsistent!');
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true });
      }
      callback();
    },
    handleWebsiteChange(value) {
      let autoCompleteResult;
      if (!value) {
        autoCompleteResult = [];
      } else {
        autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
      }
      this.autoCompleteResult = autoCompleteResult;
    },
  },
};
</script>

<style>
  #profile {
    padding: 0;
    margin: 0;
  }
  #profile h3 {
    margin: 20px 0 0 0;
    padding: 0 50px;
    font-size: 20px;
  }
  #profile .form {
    margin: 20px 0 0 0;
    padding: 0 60px;
    font-size: 20px;
    width: 800px;
  }
  #profile .form-item {
    display: inline-block;
    margin: 0 20px 20px 0;
    position: relative;
  }
  #profile .label{
    display: inline;
    position: absolute;
    top: 5px;
    left: 16px;
    pointer-events: none;
    font-size: 11px;
    color: #9DA2A6;
    font-weight: bold;
    line-height: 18px;
    z-index: 100;
  }
  #profile .input {
    height: 50px;
    padding-top: 20px;
    font-size: 20px;
    font-weight: inherit;
  }
  #profile .name {
    width: 300px;
  }
  #profile .email {
    width: 620px;
  }
  #profile .phone {
    width: 620px;
  }
  #profile .addr {
    width: 620px;
  }
  #profile .subm {
    width: 620px;
    height: 50px;
    margin: 0;
  }
</style>